<!-- @@master = admin-layout.html-->
<!-- @@block = content -->

<div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            系统架构
            <small>项目组织</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">系统架构</a></li>
            <li class="active">项目组织</li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

        <div class="box box-primary">
            <!-- <div class="box-header with-border">
                    <h3 class="box-title">表单信息</h3>
                </div> -->

            <div class="box-body">
                <div class="organize">


                    <form class="addform form-horizontal">
                        <div class="head">项目流程</div>
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="">应用：</label>
                                <select class="col-sm-10 control-style">
                                    <option value="">应用1</option>
                                    <option value="">应用1</option>
                                    <option value="">应用1</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="">主流程：</label>
                                <div class="col-sm-10 modules">
                                    <p class="point"><span>开始</span></p>
                                    <i class="fa fa-fw fa-long-arrow-down"></i>
                                    <div class="item-module">
                                        <div class="item-box">
                                            <p><label for="">名称：</label><input class="item-form" type="text"></p>
                                            <p>
                                                <label for="">执行人：</label>
                                                <select class="item-form">
                                                    <option value="">人选1</option>
                                                    <option value="">人选</option>
                                                    <option value="">人选3</option>
                                                </select>
                                            </p>
                                        </div>
                                        <i class="fa fa-fw fa-long-arrow-down"></i>
                                        <span>
                                            <i onclick="addNewModule(this)" class="fa fa-fw fa-plus-circle addModule"></i>
                                            <i onclick="cutNewModule(this)" class="fa fa-fw fa-minus-circle cutModule"></i>
                                        </span>
                                    </div>
                                    <p class="point"><span>结束</span></p>

                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>

    </section>
    <!-- 正文区域 /-->

</div>

<script>
    $(document).ready(function() {
        setSidebarActive("admin-blank");
        $(".item-module").children('span').css('right', '-30px')
    });

    function addNewModule(module) {
        var addModule = $(module).parent().parent() // 当前所在模块

        // 追加元素
        var addDiv = $(".item-module").html()
        $(addModule).after("<div class='item-added'>" + addDiv + "</div>")

        // 按钮显示
        $(addModule).children('span').children('.addModule').hide()
        $(addModule).children('span').css('right', '-30px')

        // 最后一项显示添加按钮
        $("div[class=item-added]:last").children('span').children('.addModule').show()
        $("div[class=item-added]:last").children('span').css('right', '-60px')

    }

    function cutNewModule(module) {
        var cutmodule = $(module).parent().parent()
        cutmodule.remove()
        $("div[class=item-added]:last").children('span').children('.addModule').show()
        $("div[class=item-added]:last").children('span').css('right', '-60px')

        if ($('.item-added').length == 0) {
            $('.item-module').children('span').children('.addModule').show()
        }
    }
</script>

<!-- @@close -->
<style>
    .addform {
        max-width: 600px;
    }

    .addform .head {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 2;
    }

    .addform .control-style {
        display: block;
        /* width: 100%; */
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d2d6de;
        border-radius: 4px;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .addform .modules {
        margin-top: 10px;
        text-align: center;
    }

    .addform .modules .point {
        margin-bottom: 0;
        text-align: center;
    }

    .addform .modules .point span {
        display: inline-block;
        padding: 4px 12px;
        border: 1px solid #e2e2e2;
        border-radius: 6px;
    }

    .modules .item-module .cutModule {
        display: none
    }

    .modules .item-module,
    .modules .item-added {
        max-width: 300px;
        margin: 0 auto;
        position: relative
    }

    .modules .item-box {
        border: 1px solid #e2e2e2;
        border-radius: 6px;
        padding-top: 15px;
    }

    .modules .item-module span,
    .modules .item-added span {
        position: absolute;
        right: -60px;
        bottom: 19px;
        font-size: 18px;
        cursor: pointer;
    }

    .item-box label {
        width: 20%;
        text-align: right;
    }

    .item-box .item-form {
        width: 56%;
        height: 26px;
        line-height: 26px;
        outline: none;
        border: 1px solid #d2d6de;
        border-radius: 4px;
    }
</style>